// // 定义滚动动画
@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-distance, -100%));
  }
}

// 替换为新的无缝滚动动画
// @keyframes scrollText {
//   0% {
//     transform: translateX(0);
//   }
//   100% {
//     transform: translateX(calc(-100% - var(--gap-distance, 10px)));
//   }
// }

.container {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

.scrollingText {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
  position: relative;
  animation-play-state: running;

  // 伪元素实现无缝滚动
  &::after {
    content: attr(data-text);
    position: absolute;
    left: var(abs(--scroll-distance), 100%);;
    top: 0;
    padding-left: var(--gap-distance, 10px);
    pointer-events: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
}

// 当文字溢出时应用动画
.hasOverflow {
  .scrollingText {
    // animation: scrollText var(--animation-duration, 4s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    animation: scrollText var(--animation-duration, 4s) linear infinite;
    animation-fill-mode: both;
  }
}

// 鼠标悬停时暂停动画
.pauseOnHover:hover .scrollingText {
  animation-play-state: paused;
}